<fieldset class="section">
    <legend>Lọc hóa đơn</legend>
    <table class="table-tools">
        <colgroup>
            <col style="width: 150px;">
            <col>
        </colgroup>
        <tr>
            <td>Ngày bắt đầu</td>
            <td>
                <input type="text" id="txtNgayBatDau" value="<?php echo date('d/m/Y'); ?>">
            </td>
        </tr>
        <tr>
            <td>Ngày kết thúc</td>
            <td>
                <input type="text" id="txtNgayKetThuc" value="<?php echo date('d/m/Y'); ?>">
            </td>
        </tr>
    </table>
    <button type="button" onclick="DanhSachHoaDon.XemDanhSach(this);"><span style="display: none;" class="fa-loading fa fa-spin fa-refresh"></span> Xem kết quả</button>
    <button type="button" onclick="DanhSachHoaDon.XemTatCa(this);" style="float: right;"><span style="display: none;" class="fa-loading fa fa-spin fa-refresh"></span> Xem tất cả</button>
</fieldset>


<fieldset class="section" style="margin-top: 30px;">
    <legend>Hóa đơn đã thanh toán</legend>

    <table class="table-views">
        <colgroup>
            <col style="width: 40px;">
            <col style="width: 100px;">
            <col style="width: 140px;">
            <col style="width: 120px;">
            <col style="width: 120px;">
            <col style="width: 120px;">
            <col style="width: 120px;">
            <col>
        </colgroup>
        <thead>
        <tr>
            <td>STT</td>
            <td>Mã hóa đơn</td>
            <td>Thời gian</td>
            <td>Trị giá</td>
            <td>Khách hàng</td>
            <td>Số điện thoại</td>
            <td>Địa chỉ</td>
            <td>Thao tác</td>
        </tr>
        </thead>
    </table>
    <div style="max-height: 300px; overflow-y: auto;">
        <table class="table-views">
            <colgroup>
                <col style="width: 40px;">
                <col style="width: 100px;">
                <col style="width: 140px;">
                <col style="width: 120px;">
                <col style="width: 120px;">
                <col style="width: 120px;">
                <col style="width: 120px;">
                <col>
            </colgroup>
            <tbody>
                <tr class="default-row" style="display: none;">
                    <td class="stt" style="text-align: center;"></td>
                    <td class="mahoadon" style="text-align: center;"></td>
                    <td class="thoigian"></td>
                    <td class="trigia" style="text-align: center;"></td>
                    <td class="khachhang"></td>
                    <td class="sodienthoai" style="text-align: center;"></td>
                    <td class="diachi"></td>
                    <td style="text-align: center;">
                        <span class="td-icon chitiethoadon" onclick="DanhSachHoaDon.XemChiTietHoaDon(this);" title="Xem danh sách mặt hàng"><span class="fa fa-search"></span> </span>
                        <span class="td-icon inhoadon-link" onclick="DanhSachHoaDon.InHoaDon(this);" title="In hóa đơn"><span class="fa fa-print"></span></span>
                        <span class="td-icon ingiaohang-link" onclick="DanhSachHoaDon.PhieuGiaoHang(this);" title="In danh sách giao hàng"><span class="fa fa-truck"></span></span>

                        <!--<a href="#" target="_blank" class="inhoadon-link" title="In hóa đơn"><span class="fa fa-print"></span></a>
                        <a href="#" target="_blank" class="ingiaohang-link" title="In danh sách giao hàng"><span class="fa fa-truck"></span></a>-->
                    </td>
                </tr>
            </tbody>
            <tbody id="container-thanhtoan">

            </tbody>
        </table>
    </div>
</fieldset>

<fieldset class="section" style="margin-top: 30px;">
    <legend>Hóa đơn chưa thanh toán</legend>
    <table class="table-views">
        <colgroup>
            <col style="width: 40px;">
            <col style="width: 100px;">
            <col style="width: 140px;">
            <col style="width: 120px;">
            <col style="width: 120px;">
            <col style="width: 120px;">
            <col style="width: 120px;">
            <col>
        </colgroup>
        <thead>
        <tr>
            <td>STT</td>
            <td>Mã hóa đơn</td>
            <td>Thời gian</td>
            <td>Trị giá</td>
            <td>Khách hàng</td>
            <td>Số điện thoại</td>
            <td>Địa chỉ</td>
            <td>Thao tác</td>
        </tr>
        </thead>
    </table>
    <div style="max-height: 300px; overflow-y: auto;">
        <table class="table-views">
            <colgroup>
                <col style="width: 40px;">
                <col style="width: 100px;">
                <col style="width: 140px;">
                <col style="width: 120px;">
                <col style="width: 120px;">
                <col style="width: 120px;">
                <col style="width: 120px;">
                <col>
            </colgroup>
            <tbody>
            <tr class="default-row" style="display: none;">
                <td class="stt" style="text-align: center;"></td>
                <td class="mahoadon" style="text-align: center;"></td>
                <td class="thoigian"></td>
                <td class="trigia" style="text-align: center;"></td>
                <td class="khachhang" style="text-align: center;">Chưa có</td>
                <td class="sodienthoai" style="text-align: center;">Chưa có</td>
                <td class="diachi" style="text-align: center;">Chưa có</td>
                <td style="text-align: center;">
                    <span class="td-icon chitiethoadon" onclick="DanhSachHoaDon.XemChiTietHoaDon(this);" title="Xem danh sách mặt hàng"><span class="fa fa-search"></span> </span>
                    <a href="#" class="thanhtoanhoadon" title="Thanh toán hóa đơn"><span class="fa fa-shopping-cart"></span></a>
                    <span class="td-icon huyhoadon" onclick="DanhSachHoaDon.HuyHoaDon(this);" title="Hủy hóa đơn"><span class="fa fa-remove"></span> </span>
                </td>
            </tr>
            </tbody>
            <tbody id="container-chuathanhtoan">

            </tbody>
        </table>
    </div>
</fieldset>

<fieldset class="section" style="margin-top: 30px;">
    <legend>Chi tiết hóa đơn</legend>
    <table class="table-views">
        <colgroup>
            <col style="width: 40px;">
            <col style="width: 200px;">
            <col style="width: 140px;">
            <col style="width: 140px">
            <col style="width: 140px">
            <col>
        </colgroup>
        <thead>
            <tr>
                <td>STT</td>
                <td>Tên mặt hàng</td>
                <td>Số lượng</td>
                <td>Đơn vị tính</td>
                <td>Giá bán</td>
                <td>Thành tiền</td>
            </tr>
        </thead>
    </table>
    <div style="max-height: 300px; overflow-y: auto;">
        <table class="table-views">
            <colgroup>
                <col style="width: 40px;">
                <col style="width: 200px;">
                <col style="width: 140px;">
                <col style="width: 140px">
                <col style="width: 140px">
                <col>
            </colgroup>
            <tbody>
                <tr class="default-row" style="display: none;">
                    <td class="stt" style="text-align: center;"></td>
                    <td class="tenmathang"></td>
                    <td class="soluong" style="text-align: center;"></td>
                    <td class="donvitinh" style="text-align: center;"></td>
                    <td class="giaban"></td>
                    <td class="thanhtien"></td>
                </tr>
            </tbody>
            <tbody id="container-chitiet">

            </tbody>
        </table>
    </div>
</fieldset>

<script>
    $( "#txtNgayBatDau" ).datepicker({ dateFormat: 'dd/mm/yy' });
    $( "#txtNgayKetThuc" ).datepicker({ dateFormat: 'dd/mm/yy' });
</script>